<template>
  <div class="newList">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="item"
          v-for="item in list"
          :key="item.id"
          @click="getDetail(item.id)"
        >
          <div class="top">
            <!-- <div class="left">1</div> -->
            <img :src="item.avatar" alt="" />
            <div class="right">
              <div class="title">{{ item.stem }}</div>
              <div class="username">
                <span>{{ item.creator }}</span>
                <span> | </span>
                <span>{{ item.createdAt }}</span>
              </div>
            </div>
          </div>
          <div class="middle" v-html="item.content"></div>
          <div class="bottom">
            <span>点赞 {{ item.likeCount }}</span>
            <span>|</span>
            <span>浏览 {{ item.views }}</span>
          </div>
        </div>
        <div>没有更多了</div>
      </van-list>
    </van-pull-refresh>

    <van-skeleton title :row="20" :loading="loading" />
  </div>
</template>

<script>
// 导入请求
import { UserRequest } from "@/api/user";
export default {
  name: "HmNewList",
  data() {
    return {
      list: [],
      loading: false,
      refreshing: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    //获取最新列表
    // getSuggestList(token) {
    //   UserRequest.getSuggestList(token).then((res) => {
    //     this.list = res.data.data.rows;
    //     console.log(this.list);
    //   });
    // },
    getNewList(token) {
      UserRequest.getNewList(token).then((res) => {
        this.list = res.data.data.rows;
        console.log(this.list);
      });
    },
    getDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    //下拉刷新
    onRefresh() {
      console.log("刷新了");
      this.page = 1;
      const token = localStorage.getItem("token");
      this.getNewList(token);
      this.refreshing = false;
    },
    //上拉加载
    onLoad() {
      this.loading = true;
      this.finished = false;
      console.log("加载了");
      const token = localStorage.getItem("token");
      UserRequest.getNewList(token, this.page).then((res) => {
        console.log(res);
        if (this.page === 1) {
          this.list = res.data.data.rows;
        } else {
          this.list = this.list.concat(res.data.data.rows);
        }
        this.page++;
        this.loading = false;
        this.finished = false;
      });
    },
  },
  created() {},
};
</script>

<style scoped lang="less">
.newList {
  height: 100%;
  margin-top: (44 / @vw);
}
.item {
  border: (1 / @vw) solid #000;
  padding: (10 / @vw);
  margin: (10 / @vw);
  .top {
    display: flex;

    img {
      width: (50 / @vw);
      height: (50 / @vw);
      border-radius: 50%;
    }

    .right {
      margin-left: (10 / @vw);
      flex: 1;
    }
  }
}
// 超过两行显示省略号
.middle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
